﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageView.ascx.cs" Inherits="JohnnySins.Controls.ImageView" %>

<script type="text/javascript">
    var startListen = 0;

    $(function () {
        $("#imageViewDialog").dialog({autoOpen: false, width: 640, minHeight: 480, resizable: false});
         $("#imageViewDialog").parent().appendTo(jQuery("form:first"));
         $(".ui-dialog-titlebar").hide();
     });
     
     function showImageViewDialog(url) {
         var wWidth = $(window).width();
         var wHeight = $(window).height();

         var dlgWidth = wWidth * 99 / 100; //970;
         var dlgHeigth = wHeight * 99 / 100;

         var fld = $('#fieldsetImage');
         fld.height(dlgHeigth - 50);
         var divDoc = $('#divImageView');
         divDoc.height(dlgHeigth - 100);

         var imgView = $('#imgDocument');
         imgView.attr('src', url);
         imgView.css('max-width', dlgWidth - 60);
         imgView.css('max-height', dlgHeigth - 120);

         var dlg = $("#imageViewDialog");
         dlg.dialog("option", "width", dlgWidth);
         dlg.dialog("option", "height", dlgHeigth);
         dlg.dialog('open');

         $(document).on('click.imageDialog', function () {
             if (startListen == 1) {
                 startListen = 0;
                 $('#imageViewDialog').dialog('close');
                 $(document).off('click.imageDialog');
             }
             else
                 startListen = 1;
         });
     }
</script>

<div id="imageViewDialog">
    <div class="row">
        <div class="fieldset_block col-lg-12 page_area">
            <fieldset id="fieldsetImage">
                <div class="fieldset_content form-horizontal col-lg-12" id="divImageView">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="height:inherit;">
                                <tr>
                                    <td align="center" valign="middle">
                                        <img id="imgDocument" alt="" src="" align="middle" style="margin: 0 auto; display: block;"/>
                                    </td>
                                </tr>
                            </table>
                </div>
                <div class="button_group">
                    <input type="button" class="btn btn-info" value="Close" onclick="$('#imageViewDialog').dialog('close'); return false;" />
                </div>
            </fieldset>
        </div>
    </div>
</div>

